<template>
  <div>
    <div class="bar">
      <el-button-group>
        <el-button type="primary" @click="showCreateType">新增</el-button>
        <el-button type="primary" @click="showModifyType">编辑</el-button>
        <el-button type="primary" @click="del">删除</el-button>
      </el-button-group>
      <el-button-group>
        <el-button type="primary" @click="showCreateNode">新增键值</el-button>
      </el-button-group>
    </div>
    <div class="flex">
        <el-table
          ref="type"
          :data="rootDicts"
          highlight-current-row
          @current-change="handleCurrentChange"
          class="type">
          <el-table-column
            label="类别"
            prop="name"
            align="center"
            width="200">
          </el-table-column>
        </el-table>

        <el-table :data="nodeDicts" highlight-current-row class="dicts">
          <el-table-column label="名称" prop="name" align="center"></el-table-column>
          <el-table-column label="值" prop="value" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template scope="scope">
              <el-button @click="modifyNode(scope.row)" type="text" size="small">编辑</el-button>
              <el-button @click="delNode(scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
    </div>

    <el-dialog title="新增/编辑" v-model="dialogFormVisible1">
      <el-form :model="form">
        <el-form-item label="名称" :label-width="'50px'">
          <el-input v-model="editDict.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="值" :label-width="'50px'">
          <el-input v-model="editDict.value" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="新增/编辑" v-model="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="名称" :label-width="'50px'">
          <el-input v-model="form.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="值" :label-width="'50px'">
          <el-input v-model="form.value" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveNode">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style scoped>
  .bar{
    padding: 10px;
    box-shadow: 0 0px 8px rgba(0, 0, 0, 0.25);
    position: relative;
    margin-bottom: 10px;
  }
  .flex{
    display: flex;
    flex-direction: row;
    padding-bottom: 10px;
  }
  .type{
    width: 200px;
    min-width: 200px;
  }
  .dicts{
    flex-grow: 1;
    margin-left: 20px;
  }
</style>
<script>
  import dictApi from '../../../api/sys/dictApi'
  export default{
    data () {
      return {
        rootDicts: [],
        selectedDict: null,
        nodeDicts: [],
        editDict: {},
        form: {},
        dialogFormVisible: false,
        dialogFormVisible1: false
      }
    },
    created () {
      dictApi.getDict().then(resp => {
        this.rootDicts = resp.body.data
      })
    },
    methods: {
      handleCurrentChange (data) {
        this.selectedDict = data
        if (!data) return

        dictApi.getNodes(data.pkid).then(({body}) => {
          this.nodeDicts = body.data
        })
      },
      showCreateType () {
        this.editDict = {name: ''}
        this.editDict.parentId = 0
        this.editDict.value = ''
        this.dialogFormVisible1 = true
      },
      showModifyType () {
        if (!this.mustSelected()) return false
        this.editDict = this.selectedDict
        this.dialogFormVisible1 = true
      },
      save () {
        dictApi.save(this.editDict).then(({body}) => {
          if (!this.editDict.pkid) {
            this.rootDicts.push(body.data)
          }
          this.$message({
            showClose: true,
            message: '保存成功',
            type: 'success'
          })
          this.dialogFormVisible1 = false
        })
      },
      del () {
        if (!this.mustSelected()) return false
        this.$confirm('确认删除吗?', '提示', {
          type: 'warning'
        }).then(() => {
          dictApi.del(this.selectedDict.pkid).then(resp => {
            this.rootDicts.splice(this.rootDicts.indexOf(this.selectedDict), 1)
            this.nodeDicts = []
            this.$message({
              type: 'success',
              message: '删除成功'
            })
          })
        },
        () => {})
      },
      mustSelected () {
        if (!this.selectedDict) {
          this.$message({
            type: 'error',
            message: '请选择要编辑的字典'
          })
          return false
        }
        return true
      },
      showCreateNode () {
        if (!this.mustSelected()) return false
        this.form = {name: '', value: ''}
        this.dialogFormVisible = true
      },
      saveNode () {
        if (!this.form.pkid) {
          this.form.parentId = this.selectedDict.pkid
        }
        dictApi.save(this.form).then(resp => {
          if (!this.form.pkid) this.nodeDicts.push(resp.body.data)
          this.$message({
            showClose: true,
            message: '保存成功',
            type: 'success'
          })
          this.dialogFormVisible = false
        })
      },
      modifyNode (dict) {
        this.form = dict
        this.dialogFormVisible = true
      },
      delNode (dict) {
        this.$confirm('确认删除吗?', '提示', {
          type: 'warning'
        }).then(() => {
          dictApi.del(dict.pkid).then(resp => {
            this.nodeDicts.splice(this.nodeDicts.indexOf(dict), 1)
            this.$message({
              type: 'success',
              message: '删除成功'
            })
          })
        },
        () => {})
      }
    }
  }
</script>
